<template>
  <div class="hot-board-container">
    <div class="header-bar glass-panel">
      <div class="header-left">
        <div class="icon-wrapper">
          <img class="hot-icon" src="https://so1.360tres.com/t01a815bd3d379e2381.jpg" alt="icon" />
          <div class="icon-glow"></div>
        </div>
        <div class="header-title">
          <h2 class="neon-text">今日热榜 <span class="header-en">HOT TRENDS</span></h2>
          <p class="sub-title">汇聚全网热点 · 实时数据监控</p>
        </div>
      </div>
      <div class="header-right">
        <div class="time-block">
          <div class="time-now">{{ currentTime }}</div>
          <div class="time-desc">{{ lunarDate }}</div>
        </div>
        <div class="action-btns">
          <button class="tech-icon-btn" title="刷新" @click="getData"><i class="icon">⟳</i></button>
          <button class="tech-icon-btn" title="更多"><i class="icon">⚙️</i></button>
        </div>
      </div>
    </div>

    <div class="board-grid">
      <div class="board-card glass-panel" v-for="(board, index) in boardList" :key="index">
        <transition name="fade">
          <div v-if="board.loading" class="loading-mask">
            <div class="tech-spinner"></div>
            <span class="loading-text">LOADING...</span>
          </div>
        </transition>

        <div class="board-header">
          <div class="board-header-left">
            <img v-if="board.icon" :src="`${baseUrl}${board.icon}`" alt="logo" class="board-icon" />
            <span class="board-title">{{ board.title }}</span>
          </div>
          <span class="board-tag" :class="getTagClass(board.tag)">{{ board.tag }}</span>
        </div>

        <div class="tech-divider"></div>

        <ul class="board-items custom-scrollbar">
          <template v-if="board.items.length > 0">
            <li v-for="(item, i) in board.items" :key="i" class="board-item" @click="onToNewsDetails(item)">
              <span class="rank" :class="`rank-${i + 1}`">{{ i + 1 }}</span>
              <span class="text">{{ item.title }}</span>
              <i class="el-icon-arrow-right item-arrow"></i>
            </li>
          </template>

          <template v-else>
            <div class="empty-state">
              <i class="el-icon-odometer"></i>
              <span>暂无数据信号</span>
            </div>
          </template>
        </ul>

        <div class="board-footer">
          <span class="update-time">
            <i class="el-icon-time"></i> {{ getRelativeTime(board.lastUpdate) }}
          </span>
          <i class="refresh-icon el-icon-refresh" @click="refreshBoard(index)" title="更新数据"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsTop10 } from '@/api/news'

export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      currentTime: '',
      lunarDate: '', // 补全 data 定义
      timer: null,
      timer1: null,
      boardList: [
        {
          title: "新浪微博",
          tag: "热搜",
          icon: "/upload/xlwb.png",
          lastUpdate: new Date(Date.now() - 5 * 60 * 1000), 
          items: [
            { title: '2025年度热词有哪些？', url: '#' },
            { title: 'AI 辅助编程进入主流了吗？', url: '#' },
            { title: '未来科技趋势展望报告', url: '#' },
            { title: 'SpaceX 新一代星舰发射成功', url: '#' },
            { title: '全球气候变化峰会开幕', url: '#' },
          ],
          loading: false
        },
        {
          title: "抖音",
          tag: "视频",
          icon: "/upload/dy.png",
          lastUpdate: new Date(Date.now() - 60 * 60 * 1000), 
          items: [], 
          loading: false
        },
        {
          title: "知乎",
          tag: "讨论",
          icon: "/upload/zh.png", 
          lastUpdate: new Date(Date.now() - 3 * 60 * 60 * 1000), 
          items: [],
          loading: false
        },
        {
          title: "澎湃新闻",
          tag: "时事",
          icon: "/upload/pp.png",
          lastUpdate: new Date(Date.now() - 2 * 60 * 60 * 1000),
          items: [],
          loading: false
        },
        {
          title: "网易新闻",
          tag: "综合",
          icon: "/upload/wy.png",
          lastUpdate: new Date(Date.now() - 30 * 60 * 1000),
          items: [],
          loading: false
        },
        {
          title: "CSDN",
          tag: "技术",
          icon: "/upload/csdn.png",
          lastUpdate: new Date(Date.now() - 10 * 60 * 1000),
          items: [],
          loading: false
        }
      ]
    }
  },
  methods: {
    getTagClass(tag) {
       // 根据标签内容返回不同的颜色样式类，这里统一样式，可根据需求扩展
       return 'tag-default';
    },
    onToNewsDetails(row){
      console.log('跳转到新闻详情页面，row=',row)
      if(row.url) window.open(row.url);
    },
    getData() {
      // 页面初始加载时，全部卡片都显示 loading
      this.boardList.forEach(board => board.loading = true);
      
      let param = {}
      getNewsTop10(param).then(res => {
        if (res && res.data.code === 200 && res.data.data) {
          const dataMap = {
            0: 'XINLANGB',
            1: 'DOUYIN',
            2: 'XINLANGNEWS',
            3: 'PENGPAI',
            4: 'WANGYIXINWEN',
            5: 'CSDN'
          }

          Object.keys(dataMap).forEach(index => {
            const i = Number(index)
            // 确保 items 存在
            const items = res.data.data[dataMap[i]] || [];
            if(items.length > 0) {
               this.boardList[i].items = items;
            }
            this.boardList[i].loading = false
            this.boardList[i].lastUpdate = new Date()
          })
        } else {
          // 模拟数据（如果接口不通，防止页面空白，仅供展示效果）
          this.boardList.forEach(board => {
              if(board.items.length === 0) board.loading = false;
          });
          // this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.error(err)
        this.boardList.forEach(board => board.loading = false)
      })
    },
    toNewsDetails() {
      this.$router.push({
        name: 'newDetails'
      })
    },
    getRelativeTime(time) {
      if(!time) return '';
      const diff = (Date.now() - new Date(time)) / 1000
      if (diff < 60) return "刚刚更新"
      if (diff < 3600) return Math.floor(diff / 60) + " 分钟前"
      if (diff < 86400) return Math.floor(diff / 3600) + " 小时前"
      return Math.floor(diff / 86400) + " 天前"
    },
    async refreshBoard(index) {
      this.boardList[index].loading = true;
      try {
        const res = await getNewsTop10({}); 
        if (res && res.data.code === 200 && res.data.data) {
           // 逻辑同 getData，这里简化
           // 实际应根据 index 映射 key
           setTimeout(() => { this.boardList[index].loading = false; }, 800); // 模拟网络延迟感
           this.boardList[index].lastUpdate = new Date();
        } else {
           this.$message.error(res.data.message)
           this.boardList[index].loading = false;
        }
      } catch (error) {
        console.error(error);
        this.boardList[index].loading = false;
      }
    },
    updateTime() {
      const now = new Date()
      const pad = n => n.toString().padStart(2, '0')
      const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.currentTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
      this.lunarDate = `农历十月十三 ${week[now.getDay()]}` 
    }
  },
  mounted() {
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
    this.getData()
    this.timer1 = setInterval(() => {
      this.getData();
    }, 30 * 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer1);
  }
}
</script>

<style scoped>
/* ================= 变量模拟 (Scoped CSS) ================= */
/* 由于 scoped 无法直接读取 less 变量，这里使用固定值匹配风格 */
/* Primary: #00f2ff, Accent: #7d2ae8, Bg: #1a1f2c */

.hot-board-container {
  padding: 0; /* 父容器已有 padding */
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #e2e8f0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
}

/* ================= 通用玻璃拟态面板 ================= */
.glass-panel {
  background: rgba(26, 31, 44, 0.7); /* 深色半透明背景 */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ================= 顶部栏 ================= */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  padding: 12px 24px;
  margin-bottom: 20px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* 顶部微光效果 */
.header-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.5), transparent);
}

.header-left {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  position: relative;
  margin-right: 16px;
}

.hot-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: rgba(0, 242, 255, 0.2);
  filter: blur(15px);
  z-index: -1;
}

.header-title h2 {
  margin: 0;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

.header-en {
  font-size: 12px;
  color: #00f2ff;
  font-weight: 900;
  opacity: 0.8;
  margin-left: 8px;
  font-style: italic;
}

.sub-title {
  font-size: 13px;
  color: #94a3b8;
  margin: 4px 0 0 0;
  letter-spacing: 0.5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.time-block {
  text-align: right;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 20px;
}

.time-now {
  font-size: 16px;
  color: #00f2ff;
  font-family: 'Consolas', monospace;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(0, 242, 255, 0.4);
}

.time-desc {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.action-btns {
  display: flex;
  gap: 12px;
}

/* 科技感按钮 */
.tech-icon-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-icon-btn:hover {
  background: rgba(0, 242, 255, 0.1);
  border-color: #00f2ff;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
  transform: translateY(-2px);
}

.icon {
  font-size: 18px;
}

/* ================= 布局网格 ================= */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  flex: 1;
  overflow-y: auto; /* 允许整个网格滚动 */
  padding-bottom: 20px;
  /* 隐藏整体滚动条 */
  scrollbar-width: none; 
}
.board-grid::-webkit-scrollbar { display: none; }

/* ================= 卡片样式 ================= */
.board-card {
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 360px; /* 稍微增加高度 */
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.board-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 255, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* 装饰线条 */
.tech-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 242, 255, 0.1), rgba(125, 42, 232, 0.1));
  margin: 12px 0;
}

/* 卡片标题区 */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.board-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.board-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}

.board-title {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.5px;
}

.board-tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.tag-default {
  background: rgba(125, 42, 232, 0.15);
  color: #bfa3f7;
  border: 1px solid rgba(125, 42, 232, 0.3);
}

/* ================= 列表内容 ================= */
.board-items {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

/* 自定义细滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 242, 255, 0.3);
}

.board-item {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.board-item:hover {
  background: rgba(255, 255, 255, 0.05);
  
  .text { color: #00f2ff; }
  .item-arrow { opacity: 1; transform: translateX(0); }
}

.rank {
  font-weight: 700;
  margin-right: 12px;
  width: 20px;
  text-align: center;
  font-family: 'Consolas', monospace;
  color: #64748b;
}

/* 前三名特殊样式 */
.rank-1 { color: #ff4d4f; text-shadow: 0 0 8px rgba(255, 77, 79, 0.4); font-size: 16px; }
.rank-2 { color: #ffc53d; text-shadow: 0 0 8px rgba(255, 197, 61, 0.4); font-size: 15px; }
.rank-3 { color: #00f2ff; text-shadow: 0 0 8px rgba(0, 242, 255, 0.4); font-size: 14px; }

.text {
  color: #cbd5e1;
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.item-arrow {
  color: #00f2ff;
  font-size: 12px;
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.2s;
}

/* 空状态 */
.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 12px;
  gap: 8px;
  
  i { font-size: 24px; opacity: 0.5; }
}

/* ================= 底部信息 ================= */
.board-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #64748b;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.update-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.refresh-icon {
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  transition: 0.3s;
}
.refresh-icon:hover {
  color: #00f2ff;
  transform: rotate(180deg);
}

/* ================= Loading 遮罩动画 ================= */
.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 18, 25, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border-radius: 16px;
}

.tech-spinner {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 242, 255, 0.1);
  border-top: 2px solid #00f2ff;
  border-right: 2px solid #7d2ae8;
  border-radius: 50%;
  animation: techSpin 0.8s linear infinite;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

.loading-text {
  margin-top: 10px;
  font-size: 10px;
  color: #00f2ff;
  letter-spacing: 2px;
  font-weight: 700;
  animation: blink 1.5s infinite;
}

@keyframes techSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>